<template>
    <div style="height: 100%;width: 100%">
        <scroll style="height: calc(100% - 52px)"
                :pageSize="pageSize"
                :total="total"
                @on-infinite="getFuelOrder">
            <div class="home">
                <header>
                    <div class="home-oil">
                        <div class="home-list">
                            <div class="home-list-label">加油总金额(元)</div>
                            <div class="home-list-data">
                                <countup :end-val="sysInfo.fuelAmount ? Number(sysInfo.fuelAmount) : 0"
                                         :decimals="2"
                                         start></countup>
                            </div>
                        </div>
                        <div class="home-list">
                            <div class="home-list-label">加油总笔数(笔)</div>
                            <div class="home-list-data">
                                <countup :end-val="sysInfo.fuelCount ? sysInfo.fuelCount : 0" :duration="4"
                                         start></countup>
                            </div>
                        </div>
                        <div class="home-list">
                            <div class="home-list-label">加油总量(升)</div>
                            <div class="home-list-data">
                                <countup :end-val="sysInfo.fuelCharge ? Number(sysInfo.fuelCharge) : 0"
                                         :decimals="2"
                                         start></countup>
                            </div>
                        </div>
                    </div>
                </header>
                <grid :rows="3" class="home-grid">
                    <grid-item link="myTankerList">
                        <i class="iconfont icon-jiayou home-grid-icon" style="color: #44b549;height:43px;"></i>
                        <div class="home-grid-number">我的加油机</div>
                        <div class="home-grid-label">{{sysInfo.totalTanker}}台</div>
                    </grid-item>
                    <grid-item link="icInfo">
                        <i class="iconfont icon-icqia home-grid-icon"
                           style="color:#478bc5;font-size:35px;height:45px;display:block"></i>
                        <div class="home-grid-number">我的IC卡</div>
                        <div class="home-grid-label">{{sysInfo.totalCard}}张</div>
                    </grid-item>
                    <grid-item link="icWater">
                        <i class="iconfont icon-iconfontchongzhi home-grid-icon"
                           style="color:#478bc5;font-size:32px;height:45px;display:block"></i>
                        <div class="home-grid-number">累计充值</div>
                        <div class="home-grid-label">{{sysInfo.totalCharge}}元</div>
                    </grid-item>
                </grid>
                <grid :rows="3" class="home-grid">
                    <grid-item link="fuelData">
                        <i class="iconfont icon-youxiangshengyuyouliang home-grid-icon"
                           style="color: #44b549;font-size:32px;height:43px;display:block"></i>
                        <div class="home-grid-number">剩余油量</div>
                        <div class="home-grid-label">{{sysInfo.remainFuel}}升</div>
                    </grid-item>
                    <grid-item link="eventList">
                        <i class="iconfont icon-shijian home-grid-icon"
                           style="color: rgb(33, 151, 216);font-size:32px;height:43px;display:block"></i>
                        <div class="home-grid-number">事件记录</div>
                        <div class="home-grid-label">&nbsp</div>
                    </grid-item>
                    <grid-item link="noticeList">
                        <i class="iconfont icon-gonggao home-grid-icon"
                           style="color:rgb(237, 92, 84);font-size:28px;height:43px;display:block"></i>
                        <div class="home-grid-number">公告通知</div>
                        <div class="home-grid-label">&nbsp</div>
                    </grid-item>
                </grid>
            </div>

            <div class="dynamic">
                <div v-for="(item, index) in mainOrderList" class="content vux-tap-active" :key="index"
                     @click="$router.push({path:'/detailOnly/' + index, query:{type: 2}})">
                    <div style="margin: 10px 10px 0 10px;display: flex">
                        <div :style="{backgroundColor: $util.getColor(item.color)}" style="color: white;width: 28px;height: 28px; text-align: center;line-height: 28px; border-radius: 50%;">
                            {{item.cardName ? item.cardName.substring(0, 1) : ''}}
                        </div>
                        <div style="display:flex;margin-left: 5px; flex-flow: column;justify-content:space-between">
                            <p style="font-size: 14px;line-height: 14px">{{item.cardId + "["+ item.cardName +"]"}}</p>
                            <p style="font-size: 14px;line-height: 10px;color: #8c8c8c;">{{item.createTime}}</p>
                        </div>
                    </div>
                    <div style="display: flex; margin:  10px 0 10px;">
                        <div style="flex-grow: 1">
                            <div style="text-align: center;font-size: 18px">{{item.amount}}</div>
                            <div style="text-align: center;font-size: 14px;color: #8c8c8c;">消费金额(元)</div>
                        </div>
                        <div style="flex-grow: 1">
                            <div style="text-align: center;font-size: 18px">{{item.fuelCharge}}</div>
                            <div style="text-align: center;font-size: 14px;color: #8c8c8c;">加油量(升)</div>
                        </div>
                    </div>
                    <div class="link"
                         style="font-size:13px;height: 30px; border-top: 1px solid #ebebeb; display: flex; justify-content: center; align-items: center;color: #00aaee">
                        查看详情
                    </div>
                </div>
            </div>
        </scroll>
        <bar selected="/"></bar>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {mapMutations} from 'vuex'
    import VUEX_NAME from '../../store/constants.vue'
    import scroll from '../../components/scroll.vue'
    import bar from '../../components/bar.vue'
    import {
        Grid,
        GridItem,
        Group,
        CellBox,
        Countup
    } from 'vux'


    export default {
        name: 'home',
        components: {
            Grid,
            GridItem,
            bar,
            Group,
            CellBox,
            Countup,
            scroll
        },
        data: function () {
            return {
                sysInfo: {
                    fuelAmount: 0,
                    fuelCount: 0,
                    fuelCharge: 0
                },

                pageSize: 10,
                total: 0,
            }
        },
        created: function () {
            this.updateMainOrderList([])

            //获取系统信息
            this.getData()

            //获取订单信息
            this.getFuelOrder(1)

        },
        mounted: function () {
        },
        computed: {
            ...mapState([
                VUEX_NAME.mainOrderList
            ])
        },
        methods: {
            ...mapMutations([
                VUEX_NAME.updateMainOrderList
            ]),
            getData: function () {
                this.$ajax(
                    'mch/sysInfo',
                    {},
                    (content) => {
                        this.sysInfo = content
                    })
            },

            getFuelOrder: function (pageNum, done) {
                this.$ajax(
                    'order/fuelOrder',
                    {
                        pageNum: pageNum,
                        pageSize: this.pageSize
                    },
                    (content) => {
                        this.total = content.totalCount
                        this.updateMainOrderList(this.mainOrderList.concat(content.resultList))
                        if (done) {
                            done()
                        }
                    })
            }
        }
    }

</script>

<style lang="less">
    .weui-cells {
        margin-top: 10px !important;
    }

    .home {
        .weui-grids::before {
            border: none
        }
    }

    .dynamic {
        display: flex;
        flex-flow: column;
        justify-content: center;
        margin-top: 10px;
    }

    .dynamic .content {
        flex-grow: 1;
        height: 135px;
        display: flex;
        flex-flow: column;
        background-color: white;
        margin-bottom: 10px;
        justify-content: space-between;

    }

</style>
